<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城-购物车</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/commonn.css">
    <link rel="stylesheet" href="./css/module.css">
    <link rel="stylesheet" href="./css/shopCar.css">
</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <!-- 头部上 -->
        <div class="header_top">
            <div class="wrapper">
                <span class="span1">legochina.cn</span>
                <span class="span2 fr">
                    欢迎光临<a href="#" class="a1">乐购</a>,
                    请 <a href="#" class="a2">登录</a>\
                    <a href="#" class="a1">注册</a>
                </span>
                <!-- logo -->
                <img src="./imgs/07-_结算（付款）成功、失败_02.png" alt="">
            </div>
        </div>
        <!-- 头部中 -->
        <div class="header_mid clearfix wrapper">
            <!-- 搜索框 -->
            <form action="#" class="clerafix fl search">
                <input type="text" placeholder="创意文具" class="inp fl">
                <input type="button" class="btn fl">
            </form>
            <!-- 购物车,我的订单 -->
            <div class="div1 clearfix fr">
                <span class="fl">
                    <p>购物车 3</p>
                </span>
                <span class="fl">我的订单</span>
            </div>
        </div>
        <!-- 头部下 -->
        <ul class="clearfix wrapper">
            <li><a href="#">图书</a></li>
            <li><a href="#">电子书</a></li>
            <li><a href="#">原创文学</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">运动户外</a></li>
            <li><a href="#">孕婴童</a></li>
            <li><a href="#">家居</a></li>
            <li><a href="#">创意文具</a></li>
            <li><a href="#">地方特产</a></li>
            <li><a href="#">海外购</a></li>
            <li><a href="#">电器城</a></li>
        </ul>
    </div>
    <!-- 头部结束 -->

    <div class="wrapper">
        <table id="shopcar">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="allSelect"> 全选
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" class="singlSelect">
                    </td>
                    <td>
                        <img src="./imgs/book/book1.jpg" alt=""> 从你的全世界路过
                    </td>
                    <td class="sPrice">41.07</td>
                    <td>
                        <span class="addNum">+</span><input type="text" class="num" value="1"><span
                            class="reduce">-</span>
                    </td>
                    <td class="count">41.00</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">移到我的关注</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="singlSelect">
                    </td>
                    <td>
                        <img src="./imgs/book/book10.jpg" alt=""> 从你的全世界路过
                    </td>
                    <td class="sPrice">41.01</td>
                    <td>
                        <span class="addNum">+</span><input type="text" class="num" value="1"><span
                            class="reduce">-</span>
                    </td>
                    <td class="count">41.00</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">移到我的关注</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="singlSelect">
                    </td>
                    <td>
                        <img src="./imgs/book/book13.jpg" alt=""> 从你的全世界路过
                    </td>
                    <td class="sPrice">41.01</td>
                    <td>
                        <span class="addNum">+</span><input type="text" class="num" value="1"><span
                            class="reduce">-</span>
                    </td>
                    <td class="count">41.00</td>
                    <td>
                        <a href="#">删除</a>
                        <a href="#">移到我的关注</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="checkbox" class="allSelect"> 全选
                    </td>
                    <td colspan="2">删除选中商品</td>
                    <td>己选
                        <span id="aNum" class="font16 cf60">1</span>件商品</td>
                    <td>
                        总价
                        <span id="total" class="font16 cf60">41.00</span>
                    </td>
                    <td>
                        <button type="button">去结算</button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- main区域开始 -->
    <div id="main">
        <div class="wrapper">
            <!-- 猜你喜欢区域 -->
            <div class="popular-item">
                <!-- 猜你喜欢区标题区域  -->
                <h2 class="ffSimHei fs24px">猜你喜欢</h2>
                <div class="line"></div>
                <!-- 猜你喜欢区产品列表区 -->
                <ul class="global_list clearfix">
                    <li>
                        <a href="#">
                            <img src="./imgs/book/book4.jpg" alt="">
                        </a>
                        <img src="./imgs/book/02-产品列表_03.jpg" alt="">
                        <div class="text ffSimHei">
                            <p class="fs14px color33">白夜行 东野上吾</p>
                            <p class="fs14px">
                                <span>推荐:</span>
                                <img src="./imgs/book/02-产品列表_07.jpg" alt="">
                            </p>
                            <p class="fs18px">
                                <span class="newprice">￥:38</span>
                                <span class="delprice">￥:58</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./imgs/book/book4.jpg" alt="">
                        </a>
                        <img src="./imgs/book/02-产品列表_03.jpg" alt="">
                        <div class="text ffSimHei">
                            <p class="fs14px color33">白夜行 东野上吾</p>
                            <p class="fs14px">
                                <span>推荐:</span>
                                <img src="./imgs/book/02-产品列表_07.jpg" alt="">
                            </p>
                            <p class="fs18px">
                                <span class="newprice">￥:38</span>
                                <span class="delprice">￥:58</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./imgs/book/book4.jpg" alt="">
                        </a>
                        <img src="./imgs/book/02-产品列表_03.jpg" alt="">
                        <div class="text ffSimHei">
                            <p class="fs14px color33">白夜行 东野上吾</p>
                            <p class="fs14px">
                                <span>推荐:</span>
                                <img src="./imgs/book/02-产品列表_07.jpg" alt="">
                            </p>
                            <p class="fs18px">
                                <span class="newprice">￥:38</span>
                                <span class="delprice">￥:58</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./imgs/book/book4.jpg" alt="">
                        </a>
                        <img src="./imgs/book/02-产品列表_03.jpg" alt="">
                        <div class="text ffSimHei">
                            <p class="fs14px color33">白夜行 东野上吾</p>
                            <p class="fs14px">
                                <span>推荐:</span>
                                <img src="./imgs/book/02-产品列表_07.jpg" alt="">
                            </p>
                            <p class="fs18px">
                                <span class="newprice">￥:38</span>
                                <span class="delprice">￥:58</span>
                            </p>
                        </div>
                    </li>
                    <li class="last">
                        <a href="#">
                            <img src="./imgs/book/book4.jpg" alt="">
                        </a>
                        <img src="./imgs/book/02-产品列表_03.jpg" alt="">
                        <div class="text ffSimHei">
                            <p class="fs14px color33">白夜行 东野上吾</p>
                            <p class="fs14px">
                                <span>推荐:</span>
                                <img src="./imgs/book/02-产品列表_07.jpg" alt="">
                            </p>
                            <p class="fs18px">
                                <span class="newprice">￥:38</span>
                                <span class="delprice">￥:58</span>
                            </p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>


    </div>
    <!-- main区域结束 -->

    <div class="warImg wrapper mt40px"></div>


    <!-- 页脚开始 -->
    <div class="footer">
        <div class="div1">
            <div class="div2">
                <img src="./imgs/09_footer/footer_top01.png" alt="">
                <img src="./imgs/09_footer/footer_top02.png" alt="">
                <img src="./imgs/09_footer/footer_top03.png" alt="">
                <img src="./imgs/09_footer/footer_top04.png" alt="">
            </div>
        </div>
        <div class="wrapper div3">
            <ul class="ul1 clearfix">
                <li>购物指南
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">发票制度</a></li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">会员优惠</a></li>
                    </ul>
                </li>
                <li>支付方式
                    <ul>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">网上支付</a></li>
                        <li><a href="#">礼品卡支付</a></li>
                        <li><a href="#">银行转帐</a></li>
                    </ul>
                </li>
                <li>订单服务
                    <ul>
                        <li><a href="#">订单配送查询</a></li>
                        <li><a href="#">订单状态说明</a></li>
                        <li><a href="#">自助取消订单</a></li>
                        <li><a href="#">自助修改订单</a></li>
                    </ul>
                </li>
                <li>退换货
                    <ul>
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">自助申请退换货</a></li>
                        <li><a href="#">退换货进度查询</a></li>
                        <li><a href="#">退款方式和时间</a></li>
                    </ul>
                </li>
                <li>商家服务
                    <ul>
                        <li><a href="#">商家服务</a></li>
                        <li><a href="#">运营服务</a></li>
                        <li><a href="#">加入尾品汇</a></li>
                    </ul>
                </li>
            </ul>
            <img src="./imgs/09_footer/footer_logo.png" alt="">
            <p>公司简介&emsp; │ &emsp; Rlations&emsp; │ &emsp;网站联盟 &emsp;│ &emsp;乐购招商&emsp; │ &emsp;机构销售&emsp; │
                &emsp;手机乐购&emsp; │ &emsp;官方Blog&emsp; │ &emsp;热词搜索 </p>
            <p>Copyright&emsp; (C)&emsp; 乐购网&emsp;2004-2016,&emsp;A1l Rights Reserved</p>
        </div>
    </div>
    <!-- 页脚结束 -->

    <script src="./lib/jquery.js"></script>
    <script src="./js/shop.js"></script>
</body>

</html>